<template>
    <el-table :data="productList" style="width: 100%">
        <el-table-column label="商品名称" prop="name" />
        <el-table-column label="商品图片" prop="img">
            <template #default="scope">
                <img :src="scope.row.img" alt="" style="height: 50px" />
            </template>
        </el-table-column>
        <el-table-column label="超链接" prop="url" />
            <el-table-column label="是否上架" prop="isshow">
                <template #default="scope">
                    <el-switch v-model="scope.row.isshow" inline-prompt active-text="是" inactive-text="否" />
                </template>
            </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button size="small" type="danger" @click="handleDel(scope.$index, scope.row)">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import request from "../../server/request.js";
import { productDel } from "../../api/product";
export default {
    data() {
        return {
            productList: [
                // {
                //     name: "价值100万的广告",
                //     url: "http://www.1000phone.com",
                //     desc: "我为千锋带盐",
                //     img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.tuguaishou.com%2Fips_templ_preview%2F90%2Fc5%2F5a%2Flg_2691478_1581701107_5e46d7f39c7b0.jpg%21w1024_w%3Fauth_key%3D2222204484-0-0-5aab776fd77d229ae4678fd7ac9bd325&refer=http%3A%2F%2Fimg.tuguaishou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668754100&t=dfc68e136e0061eef7ee4255559d78e4",
                //     isshow: true,
                // },
            ],
        };
    },
    created() {
        request.get("/classes/Product").then((res) => {
            console.log(res);
            this.productList = res.data.results;
        });
    },
    methods: {
        handleEdit(idx, row) {
            console.log(idx, row);
            // 方法1:路由处理
            this.$router.push({
                path: "/product/edit",
                query: row,
            });
            // 方法2: 自己手动处理
            // let query = "";
            // for (let attr in row) {
            //   query += `${attr}=${row[attr]}&`;
            // }
            // console.log(query);
            // this.$router.push(`/product/edit?${query}`);
        },
        handleDel(idx, { objectId }) {
            productDel(objectId).then((res) => {
                //删除线上
                console.log(res);
                this.productList.splice(idx, 1); //删除表格
            });
        },
    },
};
</script>

<style lang="scss" scoped>

</style>